@keyframes changeColor{
    0%{
        background-color: rgb(50, 5, 92);
    }
    30%{
        background-color:rgb(4, 75, 4);
    }
    60%{
        background-color: rgb(4, 66, 68);
    }
    100%{
        background-color:  rgb(50, 5, 92);
    }
}
.b8{
    width:270px;
    height:450px;
    background-size: 300px 450px;
    background-position: 250px;
    background-repeat: no-repeat;
    float:left;
    animation: changeColor 4s linear 0s infinite;
}

@keyframes changeimage{
    0%{
        background-image: url(image/心选4.jpg);
    }
    25%{
        background-image: url(image/心选1.jpg);
    }
    
    50%{
        background-image: url(image/心选2.jpg);
    }
    
    75%{
        background-image: url(image/心选3.jpg);
    }
    
    100%{
        background-image: url(image/心选4.jpg);
    }
    
}
.b9{
    width:675px;
    height:450px;
    background-size: 675px 450px;
    background-repeat: no-repeat;
    float:left;
    animation: changeimage 12.5s linear 0s infinite;
}

@keyframes changetjcimage{
    0%{
        background-image: url(image/tjc.jpg);
    }
    30%{
        background-image: url(image/tjc2.jpg);
    }
    60%{
        background-image: url(image/tjc3.jpg);
    }
    100%{
        background-image: url(image/tjc.jpg);
    }
}
.b2{
    width:1500px;
    height: 500px;
    background-image: url(image/tjc.jpg);
    background-position: 90px top;
    background-repeat: no-repeat;
    background-size: 1335px 500px;
}
.b2:hover{
    animation: changetjcimage 8s linear 0s infinite;
}

@keyframes changedanceimage{
    0%{
        background-image: url(image/舞台1.jpg);
    }
    20%{
        background-image: url(image/舞台2.jpg);
    }
    
    40%{
        background-image: url(image/舞台3.jpg);
    }
    
    60%{
        background-image: url(image/舞台4.jpg);
    }
    80%{
        background-image: url(image/舞台5.jpg);
    }
    100%{
        background-image: url(image/舞台1.jpg);
    }    
}
.b10{
    width:600px;
    height:400px;
    background-size: 675px 450px;
    background-repeat: no-repeat;
    transition: 1s;
    animation: changedanceimage 12s linear 0s infinite;
}
.b10:hover{
    transform: scale(1.1);
}

@keyframes changea_Color{
    0%{
        background-color: rgba(0, 170, 255, 0.668);
    }
    30%{
        background-color:rgb(0, 255, 157, 0.668);
    }
    60%{
        background-color: rgb(234, 205, 19, 0.668);
    }
    100%{
        background-color:   rgba;
    }
}
.text16{
    padding: 0px;
    margin: 0px;
    color:white;
    height: 80px;
    line-height: 80px;
    display:block;
    background-color: rgba(0, 170, 255, 0.415);
    margin-left: 610px;
    font-size: 17px;
    transition: 1s; 
}
a{
    text-decoration: none;
}
.text16:hover{
    animation: changea_Color 2s linear 0s infinite;
    transform: scale(1.1);
}

@keyframes changeb_Color{
    0%{
        background-color: rgba(255, 0, 204, 0.668);
    }
    30%{
        background-color:rgba(0, 255, 157, 0.668);
    }
    60%{
        background-color: rgb(255, 183, 0.668);
    }
    100%{
        background-color:   rgba(0, 170, 255, 0.668);
    }
}
.b3{
    width:250px;
    height:60px;
    background-color: rgb(244, 230, 102);
    background-repeat:no-repeat;
    margin-left: 100px;
    float:left; 
    transition: 2s;  
    border:1px solid rgba;
    border-radius: 5px;
}
.b3:hover{
    animation: changeb_Color 2s linear 0s infinite;
    transform: scale(1.2);
}
.text14{
    width: 75px;
    height: 75px;
    font-style:normal;
    font-size:30px;
    text-align: center top;
    float: left;
    line-height: 30px;
    color: darkgray;
    text-indent: -10px;
}
.text14:hover{
    color:black;
}

.text15{
    line-height: 15px;
    font-style:normal;
    font-size:40px;
    text-align: center top;
    float: left;
    color: darkgray;
    font-weight:bolder;
    transition: 0.5s;  
}
.text15:hover{
    color:rgb(255, 1, 1);
    transform: scale(1.2);
}

.b15{
    background-image: url(image/播放\ \(1\).png);
    width: 75px;
    height: 75px;
    background-size:50px 50px;
    background-repeat: no-repeat;
    margin-top: 20px; 
    transition: 0.5s;
}
.b15:hover{
    background-image: url(image/开始播放.png); 
    transform: scale(1.2);
}

.bigbox7{
    width: 1100px;
    height: 150px;
    background-color: rgb(241, 239, 239);
    margin:0 auto; 
    border: 1px solid lightgrey;  
    border-radius: 90px;
    margin-top: 60px;
    transition: 1s;
}
.bigbox7:hover{
    transform: scale(1.1);
    box-shadow: 0 0 20px rgb(167, 167, 167);
    animation: changebigbox7_Color 5s linear 0s infinite;
}

@keyframes changebigbox7_Color{
    0%{
        background-color: rgb(251, 234, 247);
    }
    25%{
        background-color:rgb(224, 250, 240);
    }
    50%{
        background-color: rgb(251, 244, 227);
    }
    75%{
        background-color:   rgb(232, 247, 255);
    }
    100%{
        background-color: rgb(251, 234, 247);
    }
}
.bigbox7{
    width: 1100px;
    height: 150px;
    background-color: rgb(241, 239, 239);
    margin:0 auto; 
    border: 1px solid lightgrey;  
    border-radius: 90px;
    margin-top: 60px;
    transition: 1s;
}
.bigbox7:hover{
    transform: scale(1.1);
    box-shadow: 0 0 20px rgb(167, 167, 167);
    animation: changebigbox7_Color 5s linear 0s infinite;
}

@keyframes changebigbox9_image{
    0%{
        background-image: url(image/猎罪1.jpg);
    }
    25%{
        background-image: url(image/猎罪2.jpg);
    }
    50%{
        background-image: url(image/猎罪3.jpg);
    }
    75%{
        background-image: url(image/猎罪4.jpg);
    }
    100%{
        background-image: url(image/猎罪1.jpg);
    }
}
.b17{
    width:580px;
    height:300px;
    background-image: url(image/猎罪.jpg);
    background-size: 534px 300px;
    background-repeat: no-repeat;
    background-position:center;
    transition: 1s;
}
.b17:hover{
    transform: scale(1.2);
    box-shadow: 10px 10px 20px rgb(167, 167, 167);
    margin-top: -20%;
    margin-left: -20%;
    animation: changebigbox9_image 15s linear 0s infinite;
}

@keyframes changebigbox10_image{
    0%{
        background-image: url(image/边2\ .jpg);
    }
    25%{
        background-image: url(image/边1.jpg);
    }
    50%{
        background-image: url(image/边3.jpg);
    }
    75%{
        background-image: url(image/边4.jpg);
    }
    100%{
        background-image: url(image/边2\ .jpg);
    }
}
.b18{
    width:580px;
    height:300px;
    background-image: url(image/边.jpg);
    background-size: 534px 300px;
    background-repeat: no-repeat;
    background-position:center;
    transition: 1s;
}
.b18:hover{
    transform: scale(1.2);
    box-shadow: 10px 10px 20px rgb(167, 167, 167);
    margin-top: -20%;
    margin-left: -20%;
    animation: changebigbox10_image 15s linear 0s infinite;
}

@keyframes changebigbox11_image{
    0%{
        background-image: url(image/你安全吗1.jpg);
    }
    25%{
        background-image: url(image/你安全吗2.jpg);
    }
    50%{
        background-image: url(image/你安全吗3.jpg);
    }
    75%{
        background-image: url(image/你安全吗4.jpg);
    }
    100%{
        background-image: url(image/你安全吗1.jpg);
    }
}
.b19{
    width:580px;
    height:300px;
    background-image: url(image/你安全吗.jpg);
    background-size: 534px 300px;
    background-repeat: no-repeat;
    background-position:center;
    transition: 1s;
}
.b19:hover{
    transform: scale(1.2);
    box-shadow: 10px 10px 20px rgb(167, 167, 167);
    margin-top: -20%;
    margin-left: -20%;
    animation: changebigbox11_image 15s linear 0s infinite;
}

.b20{
    width:300px;
    height:534px;
    background-image: url(image/相柳.jpg);
    background-size: 300px 534px;
    background-repeat: no-repeat;
    
    margin:0 auto;
    transition: 1s;
}
.b20:hover{
    transform: scale(1.1);
    box-shadow: 10px 10px 20px rgb(167, 167, 167);
}

.b21{
    width:300px;
    height:534px;
    background-image: url(image/顾昀.jpg);
    background-size: 300px 534px;
    background-repeat: no-repeat;
   
    margin-left:20px;
    transition: 1s;
}
.b21:hover{
    transform: scale(1.1);
    box-shadow: 10px 10px 20px rgb(167, 167, 167);
}

.b22{
    width:300px;
    height:534px;
    background-image: url(image/莫青成.jpg);
    background-size: 300px 534px;
    background-repeat: no-repeat;
   
    transition: 1s;
}
.b22:hover{
    transform: scale(1.1);
    box-shadow: 10px 10px 20px rgb(167, 167, 167);
}

@keyframes changetext28_Color{
    0%{
       color:  rgba(20, 88, 122, 0.668);
       font-size:60px;
    }
    25%{
       color:rgba(20, 71, 51, 0.668);
       font-size:58px;
    }
    50%{
        color: rgb(110, 94, 54);
        font-size:60px;
    }
    75%{
        color: rgb(92, 56, 122);
        font-size:58px;
    }
    100%{
       color:  rgba(20, 88, 122, 0.668);
       font-size:60px;
    }
}
.text28{
   font-family: Microsoft YaHei;
   font-style:italic;
    font-weight: bolder; 
    animation: changetext28_Color 4s linear 0s infinite;  
    padding: 5px;
    margin: 5px;
}

@keyframes changeform1_Color{
    0%{
        background-color:  rgba(233, 231, 113, 0.668);
       font-size:60px;
    }
    
    50%{
        background-color: rgb(237, 207, 131);
        font-size:60px;
    }
   
    100%{
        background-color: rgba(233, 231, 113, 0.668);
       font-size:60px;
    }
}
.form1{
    width:1000px;
    height:700px;
    margin:0 auto;
    box-shadow: 0px 10px 20px rgb(167, 167, 167);
    border-radius: 10px;
    padding: 10px;
    margin-top: 60px;
    animation: changeform1_Color 4s linear 0s infinite; 
}

.input3{
    color:rgb(255, 255, 255);
    font-size: 30px;
    display: block;
    width:200px;
    height:200px;
    background-color:  rgba(243, 176, 21, 0.852);  
    position: absolute;
    margin-left: 600px;
    margin-top: -560px;
    padding: 0;
    border-radius: 90%;
    border: 0.5px solid rgb(85, 84, 84);
    transition: 0.7s;
}
.input3:hover{
    transform: scale(1.05);
    box-shadow: 0px 0px 20px white;
    border: 2px solid black;
}

.box16{
    width: 600px;
    height:200px;
    background-color:rgba;
    float:left;
    margin-left: 30px;
    transition: 1s;
    border-radius: 10px;
    padding: 5px;
}
.box16:hover{
transform: scale(1.1);
box-shadow: 0px 0px 20px rgb(167, 167, 167);
}

.b23{
    width:260px;
    height: 450px;
    background-image: url(image/生日1.jpg);
    background-repeat: no-repeat;
    background-size:270px 450px;
    float:left;
    transition: 1s;
}
.b23:hover{
   transform: scale(1.1);
}

.b24{
    width:260px;
    height: 450px;
    background-image: url(image/生日2.jpg);
    background-repeat: no-repeat;
    background-size:270px 450px;
    float:left;
    transition: 1s;
}
.b24:hover{
    transform: scale(1.1);
}

.b25{
    width:260px;
    height: 450px;
    background-image: url(image/生日3.jpg);
    background-repeat: no-repeat;
    background-size:270px 450px;
    float:left; 
    transition: 1s;
}
.b25:hover{
    transform: scale(1.1);
}

.b26{
    width:260px;
    height: 450px;
    background-image: url(image/生日4.jpg);
    background-repeat: no-repeat;
    background-size:270px 450px;
    float:left;
    transition: 1s;
}
.b26:hover{
    transform: scale(1.1);
}

.bigbox18{
    width: 1200px;
    height: 150px;
    background-color: rgba;
    margin:0 auto; 
    border: 1px solid rgba;  
    border-radius: 90px;
    margin-top: 60px;
    transition: 1s;
    font-size:70px;
    color:white;
   font-family: YouYuan;
   text-align: center center;
   font-style:italic;
    font-weight:lighter;
    text-indent: 50px;
    line-height: 100px;
}
.bigbox18:hover{
    transform: scale(1.1);
    box-shadow: 0 0 20px rgb(167, 167, 167);
    color:black;
}

.b27{
    width:150px;
    height: 150px;
    background-image: url(image/宣传.png);
    background-repeat: no-repeat;
    background-size:150px 150px;
    float:left;
    transition: 1s;   
}
.b27:hover{
   transform: scale(1.2);
}




